본문으로 건너뛰기

Custom Hooks로 상태 로직 추출

Custom Hooks란?​

React에서 Custom Hooks는 여러 컴포넌트에서 반복되는 로직을 재사용할 수 있도록 도와주는 훌륭한 도구입니다. 기존의 훅들을 조합해 나만의 훅을 만들 수 있으며, 이를 통해 코드의 재사용성을 높이고, 코드의 복잡도를 줄일 수 있습니다.

Custom Hooks 만들기​

예시 1: 입력 필드 상태 관리​

여러 컴포넌트에서 입력 필드의 값을 관리해야 한다면, 이를 Custom Hook으로 추출해 사용할 수 있습니다. 다음 예시를 통해 살펴보겠습니다.

import { useState } from 'react';

// Custom Hook: useInput
function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return [value, handleChange];
}

// 컴포넌트에서 사용 예시
function InputComponent() {
  const [name, handleNameChange] = useInput('');
  const [email, handleEmailChange] = useInput('');

  return (
    <div>
      <input type="text" value={name} onChange={handleNameChange} placeholder="Name" />
      <input type="email" value={email} onChange={handleEmailChange} placeholder="Email" />
    </div>
  );
}

예시 2: API 호출 상태 관리​

다음은 API 호출을 위한 상태와 로직을 Custom Hook으로 추출한 예시입니다. 이를 통해 여러 컴포넌트에서 동일한 API 호출 로직을 재사용할 수 있습니다.

import { useState, useEffect } from 'react';

// Custom Hook: useFetch
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

// 컴포넌트에서 사용 예시
function DataFetchingComponent() {
  const { data, loading, error } = useFetch('https://api.example.com/data');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Custom Hooks의 장점​

  1. 재사용성: 반복되는 로직을 추출해 여러 컴포넌트에서 쉽게 재사용할 수 있습니다.
  2. 가독성: 코드가 단순해지고, 각 훅이 특정 기능을 담당하므로 이해하기 쉬워집니다.
  3. 유지보수성: 로직이 한 곳에 모여 있어 수정이 용이하고, 버그가 발생했을 때 쉽게 찾아낼 수 있습니다.

주의할 점​

  1. 의존성 배열 관리: useEffect 등에서 사용하는 의존성 배열을 올바르게 관리해야 합니다. 이를 소홀히 하면 의도치 않은 재렌더링이나 무한 루프가 발생할 수 있습니다.
  2. 명확한 훅의 역할: 각 Custom Hook은 한 가지 역할에 집중하도록 설계하는 것이 좋습니다. 여러 기능을 한 훅에서 처리하면 복잡해질 수 있습니다.

더 알아보기​

  • useState: 상태 관리 훅
  • useEffect: 사이드 이펙트 관리 훅
  • React Hooks: React 공식 문서에서 제공하는 다양한 훅들
  • 리액트 커스텀 훅: Custom Hooks에 대한 심층적인 이해를 돕는 자료

내용 요약​

Custom Hooks는 React에서 상태 로직을 추출하고 재사용할 수 있는 강력한 도구입니다. 이를 통해 코드의 재사용성을 높이고 복잡도를 줄일 수 있습니다. Custom Hook을 만드는 방법과 예시를 살펴보았으며, 주의할 점도 함께 강조했습니다. Custom Hooks를 적절히 사용하면 더 깨끗하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.